<script setup>
import { ref } from 'vue';

// 模拟签到记录数据
const attendanceData = ref([
  { id: 1, studentName: '张三', studentId: 'S001', date: '2025-08-10', status: '已签到' },
  { id: 2, studentName: '李四', studentId: 'S002', date: '2025-08-10', status: '未签到' },
]);
</script>

<template>
  <div>
    <el-table :data="attendanceData" stripe style="width: 100%">
      <el-table-column prop="studentName" label="姓名" width="150" />
      <el-table-column prop="studentId" label="学号" width="150" />
      <el-table-column prop="date" label="签到日期" width="150" />
      <el-table-column prop="status" label="状态">
        <template #default="{ row }">
          <span :class="row.status === '已签到' ? 'text-green-600' : 'text-red-600'">
            {{ row.status }}
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped>
@import 'https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css';

.el-table :deep(.el-table__row--striped) {
  background-color: #f9fafb;
}
</style>